<template>
	<view class="profile">
		<view class="login">
			<h2>登录</h2>
			<form>
				<view class="user_box">
					<input type="text" v-model:value="form.username" />
					<label>Username</label>
				</view>
				<view class="user_box">
					<input type="password" v-model:value="form.password" />
					<label>Password</label>
				</view>
				<button type="default" @click="login">登录</button>
			</form>
		</view>
		
	</view>
</template>
 
<script>
	export default {
		name: '',
		data(){
			return {
				form: {
					username: "",
					password: ""
				}
			}
		},
		methods:{
			login() {
				console.log(this.form)
			}
		}
	}
</script>
 
<style lang="less" scoped>
	.profile {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		padding-bottom: 150px;
	}
	.login {
		background-color: #fff;
		padding: 20px 30px;
		box-shadow: 0px 0px 2px #fff;
		h2 {
			text-align: center;
			margin-bottom: 20px;
		}
		.user_box {
			position: relative;
			input {
				width: 100%;
				font-size: 16px;
				margin: 35px 0;
				border: none;
				outline: none;
				border-bottom: 1px solid #45aaf2;
			}
			label {
				position: absolute;
				left: 0;
				top: 0;
				transition-duration: 1s;
				pointer-events: none;
				opacity: .5;
			}
			input:hover~label {
				top: -18px;
				font-size: 4px;
				opacity: 1;
			}
		}
	}
	button {
		width: 45%;
		height: 30px;
		line-height: 30px;
		color: #fff;
		font-size: 14px;
		background-color: #45aaf2;
	}
</style>
